/*
* @Author: majingyu
* @Date:   2017-05-26 22:19:06
* @Last Modified by:   jingyu.ma
* @Last Modified time: 2017-07-02 16:31:05
*/
import React, { Component }from 'react';
import { connect } from 'react-redux';
import OrderList from 'components/myOrder.jsx';
import { submitEvaluate } from 'action/user.js';
import 'css/evaluate.less';
 
class Evaluate extends Component{
    constructor(props) {
        super(props);
         this.state={
            evaluate:'',
            starVal:0,
            starList:[
                {'value':1,'src':'/image/star-off.png'},
                {'value':2,'src':'/image/star-off.png'},
                {'value':3,'src':'/image/star-off.png'},
                {'value':4,'src':'/image/star-off.png'},
                {'value':5,'src':'/image/star-off.png'}
            ]
         }
    }  
    selectStar(value){
        let list = this.state.starList;
        let len = list.length+1;
        if(value && this.state.starVal != value){ 
            for(let i=1; i<len; i++){
                if(i <= value){
                    list[i].src = '/image/star-on.png';
                }
            }
        }else{
           for(let i=1; i<len; i++){
               list[i].src = '/image/star-off.png';
           } 
        }
        this.setState(Object.assign({},this.state,{
            starVal: value,
            starList: list
        }))
    }
    getValue(e){
        this.setState(Object.assign({},this.state,{
            evaluate: e.target.value
        }))
    }
    submit(){
        let data = {
            orderId:this.props.commont.goCommontId,
            content: this.state.evaluate,
            star:this.state.starVal
        }
        this.props.submitEvaluate(data);
    }
    render(){
        let starList = this.state.starList.map((star)=>{ 
            <img date-value="{star.value}" src="{star.src}" onClick={() => {this.selectStar(start.value)}}/>
        })
        return(
            <div className="content">
                <div className="evaluate-info">
                    <div className="evaluate-start">
                        {starList}
                    </div>
                    <textarea className="evaluate-text" rows="5" cols="50" placeholder="请在此填写您宝贵的意见" onChange={(e)=>this.getValue(e)}>
                    </textarea>
                    <a className="btn submit" onClick={()=>this.submit()}>{this.props.user.evaluate}</a>
                </div>
            </div>
        );
    }
}
const evaluateData = (state) => {
    return {
        user: state.user,
        commont: state.commont
    }
}
let dispatchHandle = (dispatch, getState) => {
    return {
        submitEvaluate(data){
            dispatch(submitEvaluate(data)) 
        }
        
    }
    
}
let visibileEvaliate= connect(evaluateData,dispatchHandle)(Evaluate);


export default visibileEvaliate;